<template>
    <div class="page">
        <div class="info">
            <h1 class="title fadeInRight" :class="{done:showTitle}"></h1>
            <p class="fadeInRight" :class="{done:showP}">为响应《江苏保监局关于开展服务创新年活动的通知》，贯彻全国保险监督工作会议精神，进一步深化“学保险，用保险，落实以客户为中心”活动，提升行业服务水平，凹凸租车诚邀江苏保险行业相关单位，参加出险代步车服务推介会。</p>
            <div class="line fadeLine" :class="{done:showLine}"></div>
            <ul>
                <li class="fadeInRight" :class="{done:showLi[0]}">
                    <h6>活动时间</h6>
                    <p>2017年5月16日 13:30</p>
                </li>
                <li class="fadeInRight" :class="{done:showLi[1]}">
                    <h6>主办方</h6>
                    <p>凹凸租车（上海新共赢信息科技有限公司）</p>
                </li>
                <li class="fadeInRight" :class="{done:showLi[2]}">
                    <h6>协办方</h6>
                    <p>南京德本商务服务有限公司</p>
                </li>
                <li class="fadeInRight" :class="{done:showLi[3]}">
                    <h6>活动地址</h6>
                    <p>南京金奥费尔蒙酒店<br/>江东中路333号</p>
                </li>
            </ul>
        </div>
        <div class="map fadeInTop" :class="{done:showMap[0]}">
            <i class="map__icon" :class="{done:showMap[1]}"></i>
            <p class="map__name fadeInTop" :class="{done:showMap[2]}"></p>
        </div>
        <div class="bg fadeBg" :class="{done:done}"></div>
    </div>
</template>

<script>
export default {
    name: 'page',
    props: ['animate'],
    data () {
        return {
            done: false,
            showTitle: false,
            showP: false,
            showLine: false,
            showLi: [false, false, false, false],
            showMap: [false, false, false],
        }
    },
    methods: {
        pageInit() {
            this.done = true;
            setTimeout(() => {
                this.showTitle = true;
            }, 200);
            setTimeout(() => {
                this.showP = true;
            }, 400);
            setTimeout(() => {
                this.showLine = true;
            }, 600);
            for(let i = 0; i < 4; i++) {
                setTimeout(() => {
                    this.showLi.splice(i, 1, true);
                }, 800 + 200 * (i + 1));
            }
            for (let i = 0; i < 3; i++) {
                setTimeout(() => {
                    this.showMap.splice(i, 1, true);
                }, 1600 + 200 * (i + 1));
            }
        }
    },
    mounted () {
        if (this.animate) {
            this.pageInit();
        }
    },
    watch: {
        animate(v) {
            if (v && !this.done){
                this.pageInit();
            }
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("../assets/images/bg_p3.jpg");
        background-position: center center;
        background-size: cover;
    }
    .info {
        position: absolute;
        z-index: 3;
        width: 100%;
        padding: 0.8rem 0.8rem 0 0.8rem;
        .title {
            display: block;
            margin-bottom: 0.2rem;
            width: 3.5rem;
            height: 0.66rem;
            z-index: 2;
            background: url("../assets/images/title_p3.png");
            background-size: 100% 100%;
        }
        p {
            display: block;
            color: #fff;
            font-size: 0.28rem;
            line-height: 1.3;
            font-weight: 100;
            text-align: justify;
        }
        h6 {
            display: block;
            color: #41a3ff;
            font-size: 0.4rem;
            line-height: 1.5;
            font-weight: bold;
            text-align: justify;
        }
        ul li {
            padding-bottom: 0.15rem;
            @at-root .ip4 & {
                padding-bottom: 0;
            }
        }
        .line {
            width: 100%;
            height: 1px;
            background: #fff;
            z-index: 2;
            margin: 0.2rem 0;
        }
    }
    .map {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
        background: url("../assets/images/map_p3.png");
        background-size: 100% 100%;
        width: 100%;
        overflow: hidden;
        &__icon {
            width: 0.62rem;
            height: 0.85rem;
            display: block;
            background: url("../assets/images/map_location_p3.png");
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -0.6rem 0 0 -1rem;
            z-index: 2;
            opacity: 0;
            &.done {
                -webkit-animation: "__map_icon" 0.9s ease-in;
                opacity: 1;
            }
        }
        &__name {
            width: 1.25rem;
            height: 0.67rem;
            display: block;
            background: url("../assets/images/map_name_p3.png");
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: 0 0 0 -0.6rem;
        }
        &:after {
            content: "";
            display: block;
            width: 100%;
            margin-top: 320/750*100 + %;
        }
    }
}
@-webkit-keyframes __map_icon {
	0%{ -webkit-transform: translate(0,-1rem); opacity: 0;}
	20%{ -webkit-transform: translate(0,-1rem); opacity: 0;}
	60%{ -webkit-transform: translate(0,0); opacity: 1;}
	70%{ -webkit-transform: translate(0,-0.2rem); opacity: 1;}
	80%{ -webkit-transform: translate(0,0); opacity: 1;}
	90%{ -webkit-transform: translate(0,-0.1rem); opacity: 1;}
	100%{ -webkit-transform: translate(0,0); opacity: 1;}
}
</style>
